import { useApproval, useApprovalProvide } from '@/components/business/Approval/approval-helper';
import { CurrentApprovalList } from '../Progress';
import { ApprovalFooter } from '../Footer';
import { PropType } from 'vue';
// 审批组件
export const MobileApproval = defineComponent({
  name: 'Approval',
  props: {
    class: {
      type: String,
      default: ''
    },
    navWidth: {
      type: String,
      default: ''
    },
    hasProvide: {
      type: Boolean,
      default: true
    },
    // 审批实例id
    processInst: {
      type: String,
      default: ''
    },
    /* 审批完成后 刷新审批组件 ｜ 关闭页面 */
    completeHandleType: {
      type: String as PropType<'refresh' | 'close'>,
      default: 'close'
    }
  },
  emits: ['update:navWidth', 'loaded'],
  setup(props, { emit }) {
    const { processInst } = toRefs(props);
    const handleInit = () => {
      emit('loaded');
    };
    const { hasApproval: approvalVisible } = props.hasProvide
      ? useApproval(handleInit, processInst, props.completeHandleType)
      : useApprovalProvide();
    const approvalFooterRef = ref<InstanceType<typeof ApprovalFooter>>();

    return () => {
      if (!approvalVisible.value) return null;
      return (
        <div class="justify-between p-12 bd rounded-8 w-full ">
          <CurrentApprovalList handle-reply={approvalFooterRef.value?.handleReply} />
          <div class="sticky bottom-12 left-0 w-full bg-white z-1000 pt-1">
            <ApprovalFooter
              ref={approvalFooterRef}
              complete-handle-type={props.completeHandleType}
              drawerVisible={false}
            />
          </div>
          <div class="sticky bottom-0 h-12 left-0 w-full bg-white z-1000"></div>
        </div>
      );
    };
  }
});
